<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="A-loadingAll">
        <button id="A-loading" onclick="load()">提交！</button>
        <img src="loading.gif" style="display: none" id="A-loadImg"/>
    </div>
    <div id="A-hidden" style="position: relative;display: block; width: 100px; text-align: center; background-color: #10b0fb;" onmouseover="hiddenPrompt()" onmouseout="hiddenPromptOut()" onclick="hiddenAll()">Try it!</div>
    <div id="A-promptContent" style="border: 1px solid greenyellow; width: 100px; text-align: center; display: none;">点击隐藏！</div>


    <script type="text/javascript">
        var i = 0;
        var timeOut;
        function load() {
            var loading = document.getElementById("A-loading");
            var loadingImg = document.getElementById("A-loadImg");
            var loadingAll = document.getElementById("A-loadingAll");
            if(i==10){
                loadingImg.style.display = "none";
                loadingAll.innerText = "已完成！";
                clearTimeout(timeOut);
            }
            else{
                i++;
                loading.style.display = "none";
                loadingImg.style.display = "inline";
                timeOut = setTimeout("load()", 1000);
            }
        }
        var hidden = document.getElementById("A-hidden");
        var prompt = document.getElementById("A-promptContent");
        function hiddenPrompt() {
            prompt.style.display = "inline";
        }
        function hiddenPromptOut() {
            prompt.style.display = "none";
        }
        function hiddenAll() {
            hidden.style.display = "none";
        }

    </script>

</body>
</html>